<template>
  <div class="ShopInformation">
    <h4>店铺信息</h4>
    <div class="cus-tabs-style">
      <el-tabs v-model="activeModel" @tab-click="handleTabClidk">
        <el-tab-pane label="基本信息" name="1">
          <p class="cus-title">
            <b>店铺基本信息</b><el-button
              type="text"
              @click="
                $router.push({ name: 'EditStore', params: { row: info } })
              "
            >编辑</el-button>
          </p>
          <ul class="cus-ul">
            <li>
              <span>店铺名称:</span><span>{{ info.busiName }}</span>
            </li>
            <li>
              <span>地址:</span><span>{{ info.address }}</span>
            </li>
            <li>
              <span>店铺管理员:</span><span>{{ info.concat }}</span>
            </li>
            <li>
              <span>联系方式:</span><span>{{ info.phone }}</span>
            </li>
            <li>
              <span>公司名称:</span><span>{{ info.companyName }}</span>
            </li>
            <li>
              <span>纳税人识别号:</span><span>{{ info.taxpayerNumber }}</span>
            </li>
            <li>
              <span>法人身份证号:</span><span>{{ info.personCard || info.legalPersonCardNumber }}</span>
            </li>
            <li class="cus-li">
              <span>营业执照:</span>
              <el-image :src="baseUrl + info.businessLicense">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </li>
            <li class="cus-li">
              <span>医疗器械备案许可证:</span>
              <el-image :src="baseUrl + info.filingLicense">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </li>
            <li class="cus-li">
              <span>法人身份证:</span>
              <div v-if="info.type == 1">
                <el-image :src="baseUrl + info.personPositiveCard">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-image :src="baseUrl + info.personBackCard">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </div>
              <div v-else-if="info.type == 0">
                <el-image :src="baseUrl + info.legalPersonPositiveCard">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-image :src="baseUrl + info.legalPersonBackCard">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="财务账号" name="2">
          <div class="cus-butn clearfix">
            <el-button
              type="primary"
              @click="
                $router.push({
                  name: 'CollectMoneyMode',
                  params: { state: 'add' }
                })
              "
            >新增账户</el-button>
          </div>

          <div
            v-for="(item, index) in accountBink"
            :key="index"
            class="cus-account"
          >
            <div class="left">
              <div class="cus-img">
                <img
                  v-if="item.type == '0'"
                  src="./../../icons/zfb.png"
                  alt=""
                >
                <img
                  v-if="item.type == '1'"
                  src="./../../icons/wx.png"
                  alt=""
                >
                <img
                  v-if="item.type == '2'"
                  src="./../../icons/yhk.png"
                  alt=""
                >
              </div>
              <div v-if="item.type == '0' || item.type == '1'">
                <p>
                  <span>收款账户类型:</span>
                  <span v-if="item.type == '0'">支付宝</span>
                  <span v-else>微信</span>
                </p>
                <p>
                  <span>账号:</span><span>{{ item.accountCard }}</span>
                </p>
                <p>
                  <span>账户真实姓名:</span><span>{{ item.accountName }}</span>
                </p>
              </div>
              <div v-else>
                <p>
                  <span>银行卡卡号:</span><span>{{ item.accountCard }}</span>
                </p>
                <p>
                  <span>户名:</span><span>{{ item.accountName }}</span>
                </p>
                <p>
                  <span>银行:</span><span>{{ item.bankName }}</span>
                </p>
                <p>
                  <span>开户行名称:</span><span>{{ item.openingBank }}</span>
                </p>
              </div>
            </div>
            <div class="right">
              <el-button type="text" @click="handelEdit(item)">编辑</el-button>
              <el-button
                style="color:red"
                type="text"
                @click="handelRemove(item)"
              >删除</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="补贴设置" name="3" disabled>
          <div class="cus-butn clearfix">
            <el-button
              type="primary"
              @click="$router.push({ name: '' })"
            >增加补贴方案</el-button>
          </div>
          <el-table :data="Bindata" class="cus-table">
            <el-table-column label="补贴名称" prop="test" />
            <el-table-column label="添加时间" prop="test" />
            <el-table-column label="操作" prop="test" align="right">
              <template>
                <el-button type="text">查看详情</el-button>
                <el-button type="text">编辑</el-button>
                <el-button type="text" style="color:red">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="店铺设置" name="4">
          <h4>店铺运营设置</h4>
          <div class="shop-setting">
            <el-row :gutter="24" class="cus-el-row">
              <el-col
                :span="3"
              ><div class="div-title"><b>运费计算:</b></div></el-col>
              <el-col :span="20">
                <div class="top">
                  <el-radio
                    v-model="setting.freightCalculation"
                    label="0"
                    @change="handelChange"
                  >多个商品运费累加</el-radio>
                </div>
                <div class="bottom">
                  <p>
                    当一个订单里有多个商品时，订单运费按照商品运费计算后累加起来。
                  </p>
                </div>
                <div class="margin-top top">
                  <el-radio
                    v-model="setting.freightCalculation"
                    label="1"
                    @change="handelChange"
                  >多个商品运费取最高</el-radio>
                </div>
                <div class="bottom">
                  <p>
                    当一个订单里有多个商品时，订单运费按照商品运费计算后取最高那个商品运费为订单运费。
                  </p>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="cus-el-row">
              <el-col
                :span="3"
              ><div class="div-title"><b>免运费规则:</b></div></el-col>
              <el-col :span="20">
                <div class="top">
                  <el-radio
                    v-model="setting.freeShipping"
                    label="0"
                    @change="handelChange"
                  >全单免运费</el-radio>
                </div>
                <div class="bottom">
                  <p>
                    当一个商品满足免运费条件或者免运费时，整个订单免运费
                  </p>
                </div>
                <div class="margin-top top">
                  <el-radio
                    v-model="setting.freeShipping"
                    label="1"
                    @change="handelChange"
                  >单个商品免运费</el-radio>
                </div>
                <div class="bottom">
                  <p>
                    当一个商品满足免运费条件或者免运费时，单个商品免运费，订单运费为0时则不再继续减免。
                  </p>
                  <p>
                    例如：一个订单有3个商品时，此时订单运费为20，如果A商品运费为20，达到免邮条件后减去20元，此时订单运费为0，
                  </p>
                  <p>B商品运费10元，达到免押条件后不继续减免，以此类推。</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
/** 店铺信息 */
import {
  shopInformationInfo,
  shopInformationSetting,
  accountBink,
  delFinance
} from '@/api/customAPI/shop/shopInformation'
export default {
  name: 'ShopInformation',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      activeModel: '1',
      // 补贴方案
      Bindata: [],
      // 财务账号
      accountBink: [],
      // 店铺信息
      info: {},
      // 店铺设置
      setting: {
        freightCalculation: '0',
        freeShipping: '0',
        shopId: localStorage.getItem('shopId')
      }
    }
  },
  mounted() {
    this.loadding()
    this.inititalInfo()
  },
  activated() {
    this.loadding()
    this.inititalInfo()
  },
  methods: {
    handelEdit(row) {
      this.$router.push({
        name: 'CollectMoneyMode',
        params: { rows: row, state: 'edit' }
      })
    },
    handelRemove(row) {
      this.$confirm('确认要删除这个账户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(result => {
        delFinance(row.id).then(inf => {
          this.$message.success('删除成功')
          this.inititalInfo()
        })
      })
    },
    /** 初始列表 */
    inititalInfo() {
      accountBink(localStorage.getItem('shopId')).then(result => {
        console.log(result.data.data)
        this.accountBink = result.data.data
      })
    },
    handelChange() {
      shopInformationSetting(this.setting).then(result => {
        this.$message.success('成功')
      })
    },
    loadding() {
      shopInformationInfo({
        shopId: localStorage.getItem('shopId')
      }).then(result => {
        this.info = result.data.data
        this.setting.freightCalculation = this.info.freightCalculationType.toString()
        this.setting.freeShipping = this.info.freeFreightCalculationType.toString()
      })
    },
    handleTabClidk(tab) {
      switch (tab.name) {
        case '1':
          break
        case '2':
          this.inititalInfo()
          break
        case '3':
          break
        case '4':
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.ShopInformation {
  padding: 50px 100px;
  .cus-tabs-style {
    .cus-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cus-ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      li {
        margin: 20px 0px;
        padding: 0;
        display: flex;
        align-items: flex-start;
        span {
          display: inline-block;
        }
        span:first-child {
          width: 180px;
        }
        span:last-child {
          width: 80%;
        }
      }
      .cus-li {
        // display: flex;
        ::v-deep.el-image {
          width: 180px;
          height: 120px;
          background: #f3f3f3;
          margin-right: 15px;
          .image-slot {
            line-height: 120px;
            text-align: center;
            font-size: 25px;
          }
        }
      }
    }
    .cus-butn {
      width: 100%;
      .el-button {
        width: 140px;
        float: right;
      }
    }
    .cus-account {
      width: 100%;
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f3f3f3;
      padding: 20px 20px;
      border-radius: 5px;
      .left {
        width: 500px;
        display: flex;
        align-items: flex-start;
        div {
          p {
            margin: 0;
            padding: 0;
            margin-bottom: 15px;
            width: 500px;
            margin-left: 20px;
            span:first-child {
              display: inline-block;
              width: 180px;
            }
            span:last-child {
              display: inline-block;
            }
          }
        }
        .cus-img {
          width: 172px;
          height: 55px;
          img {
            width: 172px;
            height: 55px;
            object-fit: contain;
          }
        }
      }
    }
    .cus-table {
      margin-top: 40px;
    }
    .shop-setting {
      .cus-el-row {
        margin-top: 40px;
        .div-title {
          min-width: 120px;
        }
        .margin-top {
          margin-top: 40px;
        }
        .top {
          ::v-deep.el-radio {
            .el-radio__label {
              font-size: 18px;
            }
            .el-radio__inner {
              width: 20px;
              height: 20px;
            }
            .el-radio__inner::after {
              width: 10px;
              height: 10px;
              background: white !important;
            }
          }
        }
        .bottom {
          p {
            color: gray;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1024px) {
  .ShopInformation {
    overflow-x: auto;
  }
}
</style>
